<template>
  <div>
    <h4>LifeCycle组件 --</h4>
  </div>
</template>

<script>
import {onBeforeMount, onMounted} from "vue";

export default {
  name: "LifeCycle",
  /**
   * VUE2.0 不能写多个相同的生命周期钩子函数!!!
   * #
   * Vue3.0组合API的生命周期钩子有7个, 可以多次使用同一个钩子, 去实现不同的逻辑
   * 多个钩子执行顺序, 跟书写顺序一样, 先来先到
   */
  setup() {
    // 1.DOM渲染前钩子
    onBeforeMount(() => {
      // DOM渲染前钩子 null
      console.log('DOM渲染前钩子', document.querySelector('h4'))
    })

    // 1.DOM渲染后钩子
    onMounted(() => {
      // DOM渲染后钩子     <h4>LifeCycle组件 --</h4>
      console.log('DOM渲染后钩子', document.querySelector('h4'))
    })

    onMounted(() => {
      console.log('DOM渲染后钩子222', document.querySelector('h4'))
    })
  }
}
</script>

<style scoped>

</style>
